PlayLab

Cross Platform on Demand Movie Streaming Mobile Application

Created : 2025-11-27
By : Viserlab
Email : support@viserlab.com

PlayLab is a On Demand Movie Streaming app for Android and iOS based on flutter framework. This is a well-designed, strong, safe, well-optimized application. PlayLab is a application for a person who have already purchased the web application of PlayLab.

This application is required for our web application. If you didn’t purchase the web app, please purchase it by clicking here.

If needed, we will update this App continuously and come with new features and security patches. We will try to give the best user experience to all of our clients.

Thank you for purchasing PlayLab .If you have any questions or queries that are not answered in this document, please feel free to contact us via email. We will try to respond to you as soon as possible. Thank you so much.

Requirements

Follow the below requirements.

Download and install Android studio
Flutter SDK (3.35.5 >= higher) must be successfully installed and setup on your device in order to edit this project.
Install the Flutter and Dart plugins after setting up your editor

Installation

Follow the below instruction to install the system.

Unzip the downloaded project and open the project to the IDE(Android Studio)
On IDE click the pubspecs.yaml file then clicks on the Pub Get button top of the IDE to install the libraries.
Make sure Flutter SDK Version is 3.35.5 >= higher
To run the project, launch the emulator or attach a real android device.
Then press the run button to start project (you can still open multi emulator at the same time)

Folder Structure

Folders and files structure are showing below

assets
- images
- animations
- fonts
lib
- view
  - components
  - screens
- data
  - controller
  - model
  - enum
  - repo
  - services
- core
  - di_service.dart
  - helper
  - Route
  - Theme
  - Util
- constants
- main.dart
pubspec.yaml

Screens

Our app screens list are showing below

Splash Screen
Nice and Dynamic On-Boarding Screen
Login and Registration Screen
Forget Password and Reset Password Screen
Email and Sms Verification Screen
Smart Homepage
Play Movie,Movie Description, Related Movie list
User-friendly Movie Details Screen
Category and Sub-category Screen
Search Movie Screen
Awesome All Movies Screen
All Episode Screen
All Free Zone Screen
Live TV Screen
Subscribe Plan Screen
Easiest Purchase Screen(including 20+ well know international payment gateway)
Movie Wishlist
Movie History list
Payment Log Screen
Nice Profile Screen
Change Password System
Policies Screen

Main Configuration

Setup Your App Configuration

1. Flutter Setup

Follow the guidelines in the following link to install the Flutter environment

OFFICIAL DOC LINK: https://docs.flutter.dev/get-started/install

2. Firebase Setup

Go to Firebase Website , Create an Account and than Navigate to Firebase Console

Create a New Firebase Project:

Once you are logged in, click on the "Add Project" button

Provide a name for your Firebase project. This name is for your reference and can be anything you like.

Choose or Create a Google Analytics Account:
If you enabled Google Analytics, you'll need to choose an existing Google Analytics account or create a new one.

Click on 'Create Project.'

Wait for Project Creation:
Firebase will take a moment to create your project. Once it's done, you'll be redirected to the project dashboard.

Click on 'Continue'

Cloud Cloud Messaging Server Key Setup
- Go to project setting > then service account > then click generate new private key.
- Now go to your admin panel system setting > notification setting > click push notification setting tab
- Now click upload config file and upload you firebase adminsdk.json file
3. Google Auth Setup
- After Clicking All Products
- Click on Authentication
- Click on Get Started
- Click on Add New Provider
- Click on Google
- Enable And Slected an Email and click on Save Button
- Auth Setup Done
- Now You Need To Setup Keystore and SHA-1 KEYsetup

4. Flutter App Firebase setup with CLI

First go to you firebase project

Click to Flutter Icon

Now Click to Install Firebase Cli

Now Click to Install Node JS

Download Nodejs LTS version and Install Node JS

Now Run npm install -g firebase-tools cmd in your terminal
Next, install the FlutterFire CLI by running the following command:

CMD> dart pub global activate flutterfire_cli

Now Setup Folder Path to environment variable:
Copy Following folder path
C:\Users\Your PC name\AppData\Local\Pub\Cache\bin

Now Open Edit the system environment variable:

Click On Environment Variable button

Click On Path and click Edit button

Click on New button and paste your Folder Path here and click OK button

Now Again Go to your Firebase tab and click Next

now go to your App Project Folder and run following Command

CMD 1 > dart pub global activate flutterfire_cli

CMD 2 > flutterfire configure --project=Your FirebaseProjec tName

Now complete Following 1 and 2 steps

When you run the second command, you will receive the data below. After that, you need to select your desired platform. Once the platform selection is complete, you have to press Enter.

Congratulations you firebase setup in you app is successfully done

5. App Key Store Setup

To generate a keystore in Android Studio, follow these steps:

Open your app code project in Android Studio.
Click On Tools > Flutter > Open Android Module in Android Studio

Now Wait For app Gradle Update
Click on the Build menu and select Generate Signed Bundle/APK.
In the Generate Signed Bundle or APK dialog, select Android App Bundle or APK and click Next.
Below the field for Key store path, click Create new.
Click NEXT Button:

On the New Key Store window, provide the following information for your keystore and key, as shown in the image below:
- Key store path: Select the location where your keystore should be created. Also, a file name should be added to the end of the location path with the .jks extension.
- Password: Create and confirm a secure password for your keystore.
- Alias: Enter a name for your key.
- Password: Create and confirm a secure password for your key.
  
  Click Create New
  
  Click OK
  
  Fillup all field
  
  Click NEXT
  
  You Will get a Release App bundle
Click OK to create the keystore and key.

Once you have created a keystore, you can use it to sign your Android apps for release.

Additional notes:

Choose a strong password for your keystore and key.
Store your keystore in a safe place.
Back up your keystore regularly.
If you lose your keystore, you will not be able to update your app on the Google Play Store.

Conclusion

Generating a keystore is an important step in preparing your Android app for release. By following the steps above, you can create a keystore and key that will help to protect your app and your users.

Admob Setup

Admob Setup Instruction

Step 1: Go to admob console(https://admob.google.com) and create an account.
Step 2: In the AdMob console, click ADD APP from the Apps menu.
Step 3: Select platform and click continue button.
Step 4: Insert your app name and click on ADD APP button.
Step 5: Then create an android app.
Step 6: In android app create a banner ads then you will get a ad unit id and app id.
Step 7: Copy the ad id and go to your project and open Android -> App -> src -> AndroidManifest.xml file then paste it inside the AndroidManifest.xml as shown below image.
Step 8: From step six (6) copy your add unit id then go to your project and open lib -> constants -> my_strings.dart file here paste the ad unit Id as shown as below image.
Step 9: Create an interstitial Ads then copy the app unit id then go to your project and open lib -> constants -> my_strings.dart file here paste the ad unit Id as shown as below image.
Step 10: Create an IOS banner ads then you will get an app id. Copy your app id and go to your project and open ios->Runner->Info.plist file and paste it below the GADApplicationIdentifier Tag as shown in Screenshot.
Step 11: From step Ten (10) copy the add unit id then go to your project and open lib -> constants -> my_strings.dart file here paste the ad unit Id as shown as below image.
Step 12: Now In IOS App create an interstitial ads and copy the app unit id and open your project lib -> constants -> my_strings.dart file and paste the ad unit id as show as below image.

In App Purchase Setup

In App Purchase Setup Instruction

App Store Setup

Step 1: Goto https://appstoreconnect.apple.com/ and sign up your App store Account.
Step 2: Select your app and go to in-app purchases > Manage.
Step 3: Set up non-consumable product and copy that product id and paste it on admin panel > Plan > app purchase code.

Play Store Setup

Step 1: Goto https://play.google.com/console and sign up your Play Store Account.
Step 2: Go to Release > Testing > Internal testing and click the Testers tab. and create a close test with some email address
Step 3: Go to Monetize > Products > In-app products. and create product with all the required information for your product
Step 4: Now copy that product id and paste it on admin panel > Plan > app purchase code

Note: Ensure that the product IDs in your app store match those in the Play Store.

Social Login Setup

Social Login Setup Instruction

Firebase & Google Login Setup

Step 1: Go to firebase console and create an application then configure an android app.
Step 2: Enable Google-Sign-in in Authentication Section.
Step 3: Download google-services.json file from firebase. Paste the google-services.json file in /android/app directory/folder.
Step 4: Download GoogleService-Info.plist file from Firebase . Paste GoogleService-Info.plist file in /ios/Runner/Info.plist directory/folder

Facebook Login Setup

Step 1: Go to Meta for Developers (facebook.com) and create an account.
Step 2: Create an App and Configure Android and IOS App. Go to Basic Section Collect AppId Then go to android-app-src-main-res-values-strings.xml and paste your app id as shown as below image.
Step 3: Go to Setting -> Advance Section Collect ClientToken Then go to android-app-src-main-res-values-strings.xml and paste your Client Token as shown as below image.
Step 4: Setup an IOS app and Collect App Id Then Go To your project and open ios -> Runner -> Info.plis file and paste it as shown as below image.

LinkedIn Login Setup

Setting up social login with LinkedIn for a project typically involves several steps. Here's a general guide to help you set it up:
- Create a LinkedIn App:
  - Go to the LinkedIn Developer portal: LinkedIn Developer
  - Sign in with your LinkedIn account or create one if you don't have it.
  - Create a new app by clicking on the "Create App" button.
  - Fill in the required details like App name, description, logo, etc.
  - Specify the Authorized Redirect URLs where LinkedIn will send the user after they authorize the app.
- Note down API credentials:
  - Once your app is created, note down the Client ID and Client Secret. You'll need these to authenticate your app.
- Configure OAuth2:
  - LinkedIn uses OAuth2 for authentication. Make sure your project supports OAuth2 and you have the necessary libraries or frameworks installed.
- Integrate LinkedIn Login into your project:
  - Install any required libraries or SDKs for LinkedIn integration in your project.
  - Follow the documentation provided by LinkedIn or the library you're using to integrate LinkedIn login functionality into your project.
  - Create a new app by clicking on the "Create App" button.
  - Typically, this involves configuring your OAuth2 client with the client ID and secret you obtained earlier, specifying the scopes you need (e.g., email, profile), and setting up the redirect URLs.
  - Implement the necessary logic to initiate the LinkedIn login process when the user clicks on the login button on your website or application.

Setup

Application Setup

1. Change App Name

For Android
- Open AndroidMainfest.xml to IDE from android/app/src/main
- Change the label name inside the application tag from this file
For IOS
- Open Info.plist file to IDE from ios/Runner
- Change the app name inside the dict. Please follow the below instruction.

2. Logo

For Android
- Go to /android/app/src/main/res and replace all mipmap folder with your generated icon android folder.
For IOS
- Go to /ios/Runner and replace Assets.xcassets with your generated Assets.xcassets folder.

Note: For different type of device we need to add different size of icon. So that you should to need to resize them. You can use https://appicon.co/ platform to generate multiple size icons for android and ios. It will provide you the icon with a correct folder structure.

3. API Base URL

Open lib/core/utils/url_container.dart file and change base url string

4. Change App Color

Open lib/core/utils/my_colorl.dart folder and Replace the value in the primary Color field with the prepared color code. From here, you can easily change the color of something else.

5. Change Package Name

Right click on project folder and click on Replace in Files
Type com.example.play_lab in the first indicated box and your own package name in the second marked box. Then click Replace All button

Publish App

Follow below instruction to publish the app

1. Android

Follow the guidelines in the following link to publish the app to Play Store.

PlayStore: https://flutter.dev/docs/deployment/android

2. IOS

Follow the guidelines in the following link to publish the app to AppStore.

AppStore: https://flutter.dev/docs/deployment/ios

Support

Support information details

Once again, thank you so much for purchasing this App. As I said at the beginning, I'd be glad to help you if you have any questions relating to this App. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

Email Us: https://viserlab.com/support